<template>
	
	<add @handleShowModelChild="handleShowModelParent"/>
	
	<!-- 弹窗 -->
	<view >
		<up-modal :show="show" showCancelButton @confirm="confirm" @cancel="cancel">
			<up-form :model="form" ref="uFormRef" :rules="rules">
				<up-form-item label="名称" prop="name">
					<up-input v-model="form.name" placeholder="请输入商品类别名称" />
				</up-form-item>
				<up-form-item label="排序" prop="sort">
					<up-input v-model="form.sort" placeholder="请输入排序，数值越大越靠后" />
				</up-form-item>
			</up-form>
		</up-modal>
	</view>
	
	<view v-for="(item,index) in classList" :key="index" class="classItem">
		<view class="nameBox">
			<up-badge type="primary" shape="circle" :value="index+1"></up-badge>
			<text class="ml20">{{item.name}}</text>
		</view>
		<view class="iconBox">
			<up-icon class="ml20" name="trash-fill" size="22"></up-icon>
			<up-icon class="ml20" name="edit-pen-fill" size="22"></up-icon>
			<up-icon class="ml20" name="plus-circle" size="22"></up-icon>
		</view>
	</view>
	
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import add from '@/components/add.vue'
	const show = ref(true) //是否显示【隐藏】弹框
	
	//表单数据 响应式【不能使用ref，追加数组失败】
	// const form = reactive({  
	//   name: '',  
	//   sort: '',
	// });  
	const form = {
	  name: '',  
	  sort: '',
	};  
	
	//表单引用
	const uFormRef = ref(null);  
	
	//监听子组件传参
	const handleShowModelParent = (newValue)=>{
		console.log('接受到子组件指令')
		show.value = newValue;
    }
	  
	//校验规则  
	const rules = {  
	  name: [  
	    {  
	      required: true,  
	      message: '请输入商品类别名称',  
	      trigger: ['blur'],  
	    },  
	  ],  
	  sort: [
		  {
			  type: 'number',
			  message: '请输入数值',
			  trigger: ['blur'],
		  }
	  ]
	};  
	  
	//分类列表
	const classList = reactive([])
	
	console.log(classList)

	//取消
	const cancel = ()=>{
		show.value = false;
	} 
	
    //确定
	const confirm = ()=>{
		//表单确认验证
		uFormRef.value.validate().then(valid => {  
			if (valid) {  
			  // uni.$u.toast('校验通过');
			  console.log(classList)
			  console.log(form)
			  // let obj={
				 //  id:1,
				 //  name:111,
				 //  sort:111,
			  // }
			  classList.push(form)
			  console.log(classList)
			  show.value = false;
			} else {  
			  // uni.$u.toast('校验失败')
			}  
		  }).catch(() => {  
			// 处理验证错误  
			// uni.$u.toast('校验失败')
		  });  
	} 
</script>

<style>
	.classItem{
		display: flex;
		padding: 10px 20rpx;
		margin-bottom: 20rpx;
		justify-content: space-between;
		border-bottom: 1rpx solid #636263;
	}
	.nameBox{
		display: flex;
	}
	.iconBox{
		display: flex;
	}
</style>
